<template>
  <div class="bottom-plate">
    <div class="panel-search">
      <el-input v-model="keyword" placeholder="请输入关键词">
        <template #suffix>
          <SvgIcon icon-class="ic_搜索" />
        </template>
      </el-input>
    </div>
    <div class="panel-body">
      <div class="panel-body-left">
        <div
          class="sidebar-item"
          v-for="item in plateCategory"
          :key="item.key"
          :class="item.key === activeKey ? 'active' : ''"
          @click="() => setActive(item.key)"
        >
          <span>{{ item.title }}</span>
        </div>
      </div>
      <div class="panel-body-right">
        <component :is="componentName" :keyword="keyword" :activeKey="activeKey"></component>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import Map from './components/map/index.vue';
import Terrain from './components/terrain/index.vue';
import WhiteMold from './components/white-mold/index.vue';
import Region from './components/region/index.vue';
import Road from './components/road/index.vue';

defineOptions({
  name: 'BottomPlate',
});

const keyword = ref('');
const activeKey = ref('map');
const plateCategory = [
  {
    key: 'map',
    title: '地图',
  },
  {
    key: 'terrain',
    title: '地形',
  },
  {
    key: 'whiteMold',
    title: '白模',
  },
  {
    key: 'region',
    title: '行政区',
  },
  {
    key: 'road',
    title: '道路',
  },
];

const component: any = {
  map: Map,
  terrain: Terrain,
  whiteMold: WhiteMold,
  region: Region,
  road: Road,
};

const componentName = computed(() => {
  return component[activeKey.value];
});

const setActive = (key: string) => {
  activeKey.value = key;
};
</script>

<style lang="less" scoped>
.bottom-plate {
  height: 100%;
  .panel-search {
    padding: 10px;
    background: #303030;
    --el-fill-color-blank: #202329;
    --el-border-color: rgba(69, 72, 81, 0.6);
    --el-text-color-regular: #fff;
    .el-input__inner ::placeholder {
      color: #9a9a9a;
    }
    :deep(.el-input__wrapper) {
      box-shadow: none;
    }
  }
  .panel-body {
    display: flex;
    height: calc(100% - 52px);
    .panel-body-left {
      width: 78px;
      background: #2a2a2a;
      overflow-y: auto;
      .sidebar-item {
        width: 100%;
        height: 48px;
        line-height: 48px;
        padding-left: 16px;
        font-size: 12px;
        color: #fff;
        cursor: pointer;
        &.active {
          background: #1d1d1d;
          opacity: 0.5;
          font-size: 14px;
          font-weight: 600;
          color: #0560fd;
        }
      }
    }
    .panel-body-right {
      flex: 1;
      background: #303030;
      overflow-y: auto;
    }
  }
}
</style>
